<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>easyui-grid</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
</head>
<body>
    <h1>用户列表（可编辑---不建议使用 很难用）</h1>
    <table id="dg" title="My Users" style="width:100%;height:250px" idField="id"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th data-options="field:'id',width:80">Item ID</th>
                <th data-options="field:'firstname',width:80,align:'right',editor:{type:'textbox',options:{required:true}}">firstname</th>
                <th data-options="field:'lastname',width:80,align:'right',editor:{type:'textbox',options:{required:true}}">lastname</th>
                <th data-options="field:'phone',width:80,align:'right',editor:{type:'numberbox',options:{precision:0}}">phone</th>
                <th data-options="field:'email',width:100,align:'right',editor:{type:'validatebox',options:{validType:'email'}}">lastname</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="append()">New</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeit()">Destroy</a>
    </div>
</body>

<script>
    $('#dg').datagrid({
        toolbar:"#toolbar",
        url: '/user/list',
        method: 'post',
        singleSelect: true,
        onClickCell: onClickCell,
        onEndEdit: onEndEdit
    });
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                if (ed){
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
                editIndex = index;
            } else {
                setTimeout(function(){
                    $('#dg').datagrid('selectRow', editIndex);
                },0);
            }
        }
    }
    function onEndEdit(index, row){
        $.ajax({
            method:'post',
            url:'/user/save',
            data:{
                'id':row.id,
                'firstname':row.firstname,
                'lastname':row.lastname,
                'phone':row.phone,
                'email':row.email
            },
            success:function (result) {
                if (result.success){
                    $('#dlg').dialog('close');		// close the dialog
                    $('#dg').datagrid('reload');	// reload the user data
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg
                    });
                }
            }
        });
    }


    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{status:'P'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
        }
    }
    function acceptit(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
            .datagrid('deleteRow', editIndex);
        var row = $('#dg').datagrid('getRows')[editIndex];
        console.log(row);
        $('#dg').datagrid('acceptChanges');
        editIndex = undefined;
        $.ajax({
            method:'post',
            url:'/user/remove',
            data:{
                'id':row.id
            },
            success:function (result) {
                if (result.success){
                    $('#dg').datagrid('reload');	// reload the user data
                } else {
                    $.messager.show({	// show error message
                        title: 'Error',
                        msg: result.msg
                    });
                }
            }
        });
    }

</script>
</html>